<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example</title>
</head>

<body>
  <p id="fruittext">There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone.</p>
  <p id="apple">One of the most interesting aspects of fruit is the variety available in each country.</p>
  <script>
  document.writeln("<pre>URL: " + document.URL);
  var elems = document.getElementsByTagName('p');
  for (var i = 0; i < elems.length; i++) {
    document.writeln("Element ID: " + elems[i].id);
    elems[i].style.border = "medium double black";
    elems[i].style.padding = '4px';
  }
  document.write("</pre>");
  </script>
</body>

</html>
